<!-- 路线新增编辑模态框 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="40%"
    @close="$emit('update:visible', false)"
  >
    <el-form :model="form" :rules="rules" label-width="70px" label-position="left" ref="accounForm">
      <div v-show="type=='add'">
        <el-form-item prop="province" label="省份：">
          <el-select
            v-model.trim="form.province"
            placeholder="省"
            @change="loadCity"
            class="form-width"
          >
            <el-option
              v-for="(item,index) in provinceOptions"
              :key="index"
              :label="item.province"
              :value="item.provinceid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="city" label="城市：">
          <el-select
            v-model.trim="form.city"
            placeholder="市"
            class="form-width"
            :disabled="!cityOptions.length"
          >
            <el-option
              v-for="(item,index) in cityOptions"
              :key="index"
              :label="item.city"
              :value="item.cityId"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="线路：" prop="rwName">
        <el-input v-model="form.rwName" placeholder="线路" class="form-width"></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary" @click="save('accounForm')">保存</el-button>
    </template>
  </el-dialog>
</template>
<script>
import api from "@/api/apiPath";
export default {
  data() {
    return {
      form: {
        province: "",
        city: "",
        rwName: ""
      },
      title: "添加路线",
      show: false,
      provinceOptions: [],
      cityOptions: [],

      rules: {
        province: [
          { required: true, message: "请选择省份", trigger: "change" }
        ],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        rwName: [{ required: true, message: "请输入路线", trigger: "blur" }]
      }
    };
  },
  props: ["visible", "type", "editform"],
  watch: {
    visible(o, n) {
      if (o) {
        this.show = true;
        this.init();
      } else {
        this.show = false;
      }
    }
  },
  methods: {
    init() {
      if (this.type == "edit") {
        this.title = "编辑路线";
        this.form = this.editform;
      } else {
        this.title = "添加路线";
        this.form = {};
        if (this.$refs["accounForm"]) {
          this.$refs["accounForm"].resetFields();
        }
      }
      if (!this.provinceOptions.length) {
        this.loadprovinces();
      }
    },
    save(formName) {
      let _this = this;
      console.log(this.form);
      this.$refs[formName].validate(valid => {
        if (valid) {
          _this.updateLine();
        } else {
          return false;
        }
      });
    },
    updateLine() {
      let url = {
        add: "/city/sysCityRailway/insertCityRailway",
        edit: "/city/sysCityRailway/updateCityRailway"
      };
      let text = { add: "添加成功", edit: "编辑成功" };
      this.$axios
        .post(url[this.type], {
          cityid: this.form.city,
          rwName: this.form.rwName,
          railId:this.form.railId
        })
        .then(res => {
          this.show = false;
          this.$message({
            type: "success",
            message: text[this.type]
          });
          this.$emit("updateLine", text);
        });
    },
    //获取省
    loadprovinces() {
      this.$axios.get("/city/provinces").then(res => {
        this.provinceOptions = res;
      });
    },
    //获取市
    loadCity(provinceId) {
      this.$set(this.form, "city", null);
      this.$axios.get(`/city/cityList/${provinceId}`).then(res => {
        this.cityOptions = res.cityList;
      });
    }
  },

  created() {},
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.form-width {
  width: 70%;
}
</style>
